<template>
    <div class="dashboard">
        <div class="toptab">
            <router-link to="/home">
                <span class="iconfont icon-arrow-down-bold"></span>
            </router-link>
            <!-- icon-shezhi -->

            <h4>仪表盘</h4>
            <span class="iconfont icon-31fenxiang"></span>
        </div>

        <div class="beginstady">
            <h4>正在学习<span>换本词数</span></h4>

            <div class="booklist">
                <div class="bookitem">
                    <div class="bookimg">
                        <img src="../assets/img/CET4.png" alt="" style="width: 82px;height: 112px;">
                    </div>
                    <div class="addbook">
                        <span>配套真题词组</span>
                        <div>+</div>
                    </div>
                </div>

                <div class="unknowbook">
                    <input type="checkbox">
                    <div>生词本</div>
                    <span>{{ vocabularynum }}</span>
                </div>

                <van-progress color="#f2826a" :percentage="persentnum" :show-pivot="false" :stroke-width="8" />
                <div class="stadynum">
                    <span>已学习 {{ stadynumber }}</span>
                    <span>总词数 {{ cet4list.length }}</span>
                </div>

                <div class="dits">
                    <ul>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="stadyinfo">
            <h4>我的数据</h4>

            <div class="infomain">
                <div class="infotop">
                    <span>概览</span>
                    <span class="iconfont icon-arrow-right-bold"></span>
                </div>

                <div class="infoitemlist">
                    <div class="infoitem">
                        <div class="infotext">
                            <img src="../assets/img/竖状图.png" alt="" style="width: 13px;height: 13px;">
                            <span>学习&复习</span>
                        </div>
                        <div class="itemnum">
                            {{ cet4list.length }}
                            <span>词</span>
                        </div>
                    </div>

                    <div class="infoitem">
                        <div class="infotext">
                            <img src="../assets/img/统计.png" alt="" style="width: 13px;height: 13px;">
                            <span>正在学习</span>
                        </div>
                        <div class="itemnum">
                            {{ stadynumber }}
                            <span>词</span>
                        </div>
                    </div>

                    <div class="infoitem">
                        <div class="infotext">
                            <img src="../assets/img/时钟.png" alt="" style="width: 13px;height: 13px;">
                            <span>暂未学习</span>
                        </div>
                        <div class="itemnum">
                            {{ unstadynum }}
                            <span>词</span>
                        </div>
                    </div>

                    <div class="infoitem">
                        <div class="infotext">
                            <img src="../assets/img/竖状图.png" alt="" style="width: 13px;height: 13px;">
                            <span>已标熟</span>
                        </div>
                        <div class="itemnum">
                            {{ prienum }}
                            <span>词</span>
                        </div>
                    </div>

                </div>


            </div>

            <div class="calenderbox">
                <div class="calendar" :value="date" @click="show = true">
                    <div class="infotop">
                        <div>日历</div>
                        <span>
                            <div>连续签到1天</div> <i class="iconfont icon-arrow-right-bold"></i>
                        </span>
                    </div>

                    <!-- <van-cell title="选择单个日期"/> -->
                    <div class="daylist">
                        <div class="dayitem">
                            <p>MON</p>
                            <span>25</span>
                        </div>

                        <div class="dayitem">
                            <p>TUE</p>
                            <span>26</span>
                        </div>

                        <div class="dayitem">
                            <p>WED</p>
                            <span>27</span>
                        </div>

                        <div class="dayitem todaybit">
                            <p>THU</p>
                            <span>28</span>
                        </div>

                        <div class="dayitem">
                            <p>FRI</p>
                            <span>29</span>
                        </div>

                        <div class="dayitem">
                            <p>SAT</p>
                            <span>30</span>
                        </div>

                        <div class="dayitem">
                            <p>SUN</p>
                            <span>31</span>
                        </div>

                    </div>

                </div>
                <van-calendar v-model="show" @confirm="onConfirm" position="right" color="#ff6800" />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: ['cet4list'],
    data() {
        return {
            date: '',
            show: false,
        };
    },
    methods: {
        formatDate(date) {
            return `${date.getMonth() + 1}/${date.getDate()}`;
        },
        onConfirm(date) {
            this.show = false;
            this.date = this.formatDate(date);
        },

    },
    computed: {
        stadynumber() {
            var newArrays = this.cet4list.filter(function (item) {
                return !item.ripe && item.stadydone == true;
            });
            return newArrays.length;
        },
        unstadynum() {
            var newArrays = this.cet4list.filter(function (item) {
                return !item.ripe && !item.stadydone == true;
            });
            return newArrays.length;
        },
        vocabularynum() {
            var newArrays = this.cet4list.filter(function (item) {
                return item.vocabularylist == true;
            });
            return newArrays.length;
        },
        prienum() {
            var newArrays = this.cet4list.filter(function (item) {
                return item.ripe == true;
            });
            return newArrays.length;
        },
        persentnum() {
            var newArrays = this.cet4list.filter(function (item) {
                return !item.ripe && item.stadydone == true;
            });

            return newArrays.length / this.cet4list.length * 100;
        }
    }
};
</script>

<style lang="scss" scoped>
.dashboard {
    // padding: 0 14.5px;
    background-color: #f4f4f4;
    // height: 100%;

    .toptab {
        display: flex;
        z-index: 99;
        justify-content: space-between;
        // align-items: center;
        padding-top: 35px;
        padding-bottom: 10px;
        // text-align: center;

        position: fixed;
        width: 100%;
        background-color: #f4f4f4;

        h4 {
            font-weight: 600;
            // padding-right: 20px;
            font-size: 14px;
        }

        span {
            font-size: 20px;
            padding: 0 18px;
        }
    }

    .beginstady {
        padding: 0 14.5px;

        h4 {

            display: flex;
            padding-top: 80px;
            justify-content: space-between;
            align-items: center;
            font-weight: 600;
            padding-bottom: 20px;

            span {
                font-size: 12px;
                color: #ff6800;
                background-color: #f5e3d6;
                padding: 2px 10px;
                border-radius: 20px;
                font-size: 500;
            }
        }

        .booklist {
            // margin: 0 14.5px;
            background: #fff;
            padding: 10px 14.5px 20px 14.5px;
            border-radius: 10px;
            position: relative;

            .bookitem {
                display: flex;

                .addbook {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: 20px;

                    span {
                        font-size: 10px;
                        transform: scale(0.9);
                        color: #383838;
                        // margin-bottom: 5px;
                    }

                    div {
                        width: 65px;
                        height: 90px;
                        border: 1px solid #e3e3e3;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 28px;
                        font-weight: 100;
                        color: #9e9e9e;
                        border-radius: 5px;

                        // margin-top: 5px;
                    }
                }
            }

            .unknowbook {
                display: flex;
                align-items: stretch;
                margin-top: 30px;
                margin-bottom: 30px;

                input {
                    width: 17px;
                    height: 17px;
                    // border-radius: 50%;
                    margin-right: 8px;
                }

                div {
                    font-size: 10px;
                    color: #404040;
                }

                span {
                    font-size: 14px;
                    margin-left: 8px;
                    color: #404040;
                }
            }

            .stadynum {
                display: flex;
                justify-content: space-between;
                margin-top: 5px;

                span {
                    font-size: 10px;
                    color: #858585;
                }
            }

            .dits {
                position: absolute;
                top: 14px;
                right: 12px;

                li {
                    width: 3px;
                    height: 3px;
                    border-radius: 50%;
                    background-color: #757575;
                    margin: 2px 0;
                }
            }
        }

    }

    .stadyinfo {
        padding: 0 14.5px;

        h4 {

            display: flex;
            padding-top: 30px;
            // justify-content: space-between;
            align-items: center;
            font-weight: 600;
            padding-bottom: 20px;

        }

        .infomain {
            padding: 10px 14.5px 20px 14.5px;
            padding-bottom: 0;
            background-color: #fff;
            border-radius: 10px;

            .infotop {
                display: flex;
                align-items: center;
                justify-content: space-between;

                span {
                    font-size: 14px;
                    color: #595959;
                    font-weight: 600;
                }

            }

            .infoitemlist {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;

                .infoitem {
                    width: 133px;
                    height: 68px;
                    display: flex;
                    flex-direction: column;
                    padding: 10px 20px 10px 0px;

                    .infotext {
                        display: flex;
                        align-items: center;

                        span {
                            font-size: 10px;
                            padding-left: 0px;
                            font-weight: 600;
                            transform: scale(0.8);
                            color: #5b5b5b;
                        }
                    }

                    .itemnum {
                        display: flex;
                        font-weight: 600;
                        font-size: 30px;
                        align-items: baseline;
                        color: #2f2f2f;

                        span {
                            font-size: 10px;
                            color: #d8d8d8;
                            padding-left: 0px;
                            font-weight: 600;
                            transform: scale(0.8);
                        }
                    }
                }
            }


        }

    }

    .calenderbox {
        // padding: 0 14.5px;
        padding-bottom: 20px;

        .calendar {
            margin-top: 30px;
            // padding-bottom: 20px;
            padding: 10px 14.5px 20px 14.5px;
            border-radius: 10px;
            background-color: #fff;

            .infotop {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-bottom: 5px;

                div {
                    color: #595959;
                    font-weight: 600;
                    font-size: 14px;
                }

                span {
                    font-size: 10px;
                    color: #595959;
                    font-weight: 600;
                    // transform: scale(0.8);
                    display: flex;
                    align-items: center;

                    div {
                        font-size: 10px;
                        color: #595959;
                        font-weight: 600;
                        transform: scale(0.8);
                        align-items: center;
                    }

                    i {
                        font-size: 14px;
                        // padding-left: 10px;
                        // transform: scale(0.999);
                    }
                }

            }

            .daylist {
                display: flex;
                justify-content: space-between;

                .dayitem {
                    font-size: 10px;
                    transform: scale(0.7);
                    display: flex;
                    flex-direction: column;
                    align-items: center;

                    p {
                        padding: 10px 10px;
                        margin-bottom: 8px;
                        color: #9e9e9e;
                    }

                    span {
                        padding: 5px 5px;
                        font-weight: 900;
                    }
                }

                .todaybit {
                    p {
                        color: #ff6800;
                    }

                    span {
                        background-color: #ff6800;
                        color: white;
                        border-radius: 50%;
                    }
                }
            }

        }
    }

}
</style>